<div class="py-4 pb-7 pb-lg-9 py-lg-9 container customer-addresses">
  <div class="row">
    <div class="col-12 col-lg-3 d-none d-lg-block">
      {% render 'account-sidebar' %}
    </div>
    <div class="col-12 col-lg-9">
      {%- comment -%}new address form{%- endcomment -%}
      <div id="new">
        <nav class="d-block d-lg-none breadcrumb mb-4" aria-label="breadcrumb">
          <a
            class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black"
            aria-current="page"
            href="{{ routes.account_addresses_url }}">
            {% render 'icon-chevron-left' %}
            {{ 'customer.account.back_to_addresses' | t }}
          </a>
        </nav>
        <div class="py-4 px-4 card rounded-3 mb-3 mb-lg-4 account-title bg-gray-100 border-0">
          <h2 class="lead fw-bold mb-0">{{ 'customer.my_addresses.add_new' | t }}</h2>
        </div>
        <div class="card p-4 rounded-3 account-content bg-gray-100 border-0">
          <div class="my-n3 my-lg-n4">
            {%- form 'customer_address', customer.new_address, class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off", aria-labelledBy: 'AddressNewHeading' -%}
              {% render 'account-address-form', form: form, new: true %}
              <div class="form-check my-3 my-lg-4 cursor-pointer small">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="address_default_address_new"
                  name="address[default]"
                  value="1"
                  {% unless customer.addresses.size > 0 %}checked{% endunless %}>
                <label class="form-check-label" for="address_default_address_new">{{ 'customer.my_addresses.set_default' | t }}</label>
              </div>
              <div class="my-3 my-lg-4 d-flex justify-content-center mx-n1 mx-lg-n2">
                <a href="{{ routes.account_addresses_url }}" class="cancel-btn w-50 w-md-auto mx-1 mx-lg-2 btn btn-outline-primary">{{ 'customer.my_addresses.cancel' | t }}</a>
                <button type="submit" class="w-50  w-md-auto mx-1 mx-lg-2 btn btn-primary">{{ 'customer.my_addresses.save' | t }}</button>
              </div>
            {%- endform -%}
          </div>
        </div>
      </div>
      {%- if customer.addresses.size > 0 -%}
        {%- paginate customer.addresses by 8 -%}
          <div id="address-list">
            <div class="as-address-list">
              <nav class="d-block d-lg-none breadcrumb mb-4" aria-label="breadcrumb">
                <a
                  class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black"
                  aria-current="page"
                  href="{{ routes.account_url }}">
                  {% render 'icon-chevron-left' %}
                  {{ 'customer.account.back_to_account' | t }}
                </a>
              </nav>
              <div class="py-4 px-4 card rounded-3 mb-3 mb-lg-4 account-title bg-gray-100 border-0">
                <h2 class="lead fw-bold mb-0">{{ 'customer.my_addresses.title' | t }}</h2>
              </div>
              <div class="row g-3 g-lg-4 row-cols-1 row-cols-lg-3">
                {%- for address in customer.addresses -%}
                  {%- if address == customer.default_address -%}
                    <div class="col">
                      <div class="card py-3 px-4 h-100 rounded-3 justify-content-between bg-gray-100 border-0">
                        <div>
                          {%- if address.first_name != blank or address.last_name != blank -%}
                            <div class="d-flex justify-content-between align-items-center">
                              <div class="ellipsis-1">
                                {% if address.first_name != blank %}
                                  {{ address.first_name }}{% endif %}
                                {% if address.last_name != blank %}
                                  {{ address.last_name }}{% endif %}
                              </div>
                              <span class="fs-footnote text-accent default-tag">{{ 'customer.my_addresses.default' | t }}</span>
                            </div>
                            <hr class="mt-3 my-4">
                          {%- endif -%}
                          <div>
                            {%- if address.address1 != blank -%}
                              <div class="ellipsis-2">{{ address.address1 }}</div>
                            {%- endif -%}
                            {%- if address.address2 != blank -%}
                              <div class="ellipsis-2">{{ address.address2 }}</div>
                            {%- endif -%}
                            {%- if address.city != blank -%}
                              <div class="ellipsis-2">{{ address.city }}</div>
                            {%- endif -%}
                            {%- if address.country != blank -%}
                              <div class="ellipsis-2">{{ address.country }}</div>
                            {%- endif -%}
                            {%- if address.zip != blank -%}
                              <div class="ellipsis-2">
                                <span>{{ 'customer.my_addresses.zip' | t }}</span>: {{ address.zip }}</div>
                            {%- endif -%}
                            {%- if address.phone != blank -%}
                              <div class="ellipsis-2">
                                <span>{{ 'customer.my_addresses.phone' | t }}</span>: {{ address.phone }}</div>
                            {%- endif -%}
                          </div>
                        </div>
                        <div>
                          <hr class="mt-4 mb-3">
                          <div class="d-flex justify-content-end">
                            <div class="mx-n2">
                              <a
                                href="javascript:void(0);"
                                class="delete-btn link-secondary small px-2 border-end"
                                aria-label="{{ 'customer.my_addresses.delete' | t }} {{ forloop.index }}"
                                data-bs-toggle="modal"
                                data-bs-target="#address-delete-{{address.id}}">{{ 'customer.my_addresses.delete' | t }}</a>
                              <a
                                class="as-address-edit link-secondary small px-2 cursor-pointer"
                                style="margin-left: 1px;"
                                id="EditFormButton_{{ address.id }}"
                                aria-label="{{ 'customer.my_addresses.edit_address' | t }} {{ forloop.index }}"
                                aria-controls="EditAddress_{{ address.id }}"
                                aria-expanded="false"
                                data-address-id="{{ address.id }}">
                                {{ 'customer.my_addresses.edit' | t }}
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="modal fade" id="address-delete-{{ address.id }}">
                        <div class="modal-dialog modal-dialog-centered" style="max-width: 350px;">
                          <div class="modal-content py-6 px-5 text-center border-0">
                            <button
                              class="btn p-0"
                              style="position: absolute; right: 16px; top: 8px;"
                              type="button"
                              data-bs-dismiss="modal"
                              aria-label="Close">
                              {% render 'icon-close' %}
                            </button>
                            <p class="mb-4">{{ 'customer.my_addresses.delete_confirm' | t }}</p>
                            <div class="row justify-content-center gy-2">
                              <div>
                                <a
                                  data-bs-dismiss="modal"
                                  class="btn btn-outline-primary d-block btn-mw"
                                  href="javascript:void(0);">{{ 'customer.my_addresses.cancel' | t }}</a>
                              </div>
                              <div>
                                <a
                                  data-addressid="{{ address.id }}"
                                  data-target="{{ address.url }}"
                                  class="as-address-delete btn btn-primary btn-mw d-block"
                                  href="javascript:void(0);">{{ 'customer.my_addresses.delete' | t }}</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  {%- endif -%}
                {%- endfor -%}
                {%- for address in customer.addresses -%}
                  {%- if address != customer.default_address -%}
                    <div class="col">
                      <div class="card py-3 px-4 h-100 rounded-3 justify-content-between bg-gray-100 border-0">
                        <div>
                          {%- if address.first_name != blank or address.last_name != blank -%}
                            <div class="d-flex justify-content-between align-items-center">
                              <div class="ellipsis-1">
                                {% if address.first_name != blank %}
                                  {{ address.first_name }}{% endif %}
                                {% if address.last_name != blank %}
                                  {{ address.last_name }}{% endif %}
                              </div>
                            </div>
                            <hr class="mt-3 my-4">
                          {%- endif -%}
                          <div>
                            {%- if address.address1 != blank -%}
                              <div class="ellipsis-2">{{ address.address1 }}</div>
                            {%- endif -%}
                            {%- if address.address2 != blank -%}
                              <div class="ellipsis-2">{{ address.address2 }}</div>
                            {%- endif -%}
                            {%- if address.city != blank -%}
                              <div class="ellipsis-2">{{ address.city }}</div>
                            {%- endif -%}
                            {%- if address.country != blank -%}
                              <div class="ellipsis-2">{{ address.country }}</div>
                            {%- endif -%}
                            {%- if address.zip != blank -%}
                              <div class="ellipsis-2">
                                <span>{{ 'customer.my_addresses.zip' | t }}</span>: {{ address.zip }}</div>
                            {%- endif -%}
                            {%- if address.phone != blank -%}
                              <div class="ellipsis-2">
                                <span>{{ 'customer.my_addresses.phone' | t }}</span>: {{ address.phone }}</div>
                            {%- endif -%}
                          </div>
                        </div>
                        <div>
                          <hr class="mt-4 mb-3">
                          <div class="d-flex justify-content-end">
                            <div>
                              {% capture form_id %}list_address_form_{{ address.id }}{% endcapture %}
                              {% form 'customer_address', address, id: form_id, class: "d-inline-block" %}
                                <input
                                  type="hidden"
                                  name="address[first_name]"
                                  value="{{form.first_name}}">
                                <input
                                  type="hidden"
                                  name="address[last_name]"
                                  value="{{form.last_name}}">
                                <input
                                  type="hidden"
                                  name="address[company]"
                                  value="{{form.company}}">
                                <input
                                  type="hidden"
                                  name="address[address1]"
                                  value="{{form.address1}}">
                                <input
                                  type="hidden"
                                  name="address[address2]"
                                  value="{{form.address2}}">
                                <input
                                  type="hidden"
                                  name="address[city]"
                                  value="{{form.city}}">
                                <input
                                  type="hidden"
                                  name="address[country]"
                                  value="{{form.country}}">
                                <input
                                  type="hidden"
                                  name="address[province]"
                                  value="{{form.province}}">
                                <input
                                  type="hidden"
                                  name="address[zip]"
                                  value="{{form.zip}}">
                                <input
                                  type="hidden"
                                  name="address[phone]"
                                  value="{{form.phone}}">
                                <input
                                  class="d-none"
                                  type="checkbox"
                                  name="address[default]"
                                  value="1"
                                  checked>
                                <button class="set-default-btn link-secondary small fw-normal p-0 border-0 text-decoration-underline bg-transparent" type="submit">{{ 'customer.my_addresses.set_default' | t }}</button>
                              {% endform %}
                            </div>
                          </div>
                          <div class="d-flex justify-content-end">
                            <div class="list-unstyled d-flex mb-0">
                              <div class="mx-n2">
                                <a
                                  href="javascript:void(0);"
                                  class="delete-btn link-secondary small px-2 border-end"
                                  aria-label="{{ 'customer.my_addresses.delete' | t }} {{ forloop.index }}"
                                  data-bs-toggle="modal"
                                  data-bs-target="#address-delete-{{address.id}}">
                                  {{ 'customer.my_addresses.delete' | t }}
                                </a>
                                <a
                                  class="as-address-edit link-secondary small px-2 cursor-pointer"
                                  style="margin-left: 1px;"
                                  id="EditFormButton_{{ address.id }}"
                                  aria-label="{{ 'customer.my_addresses.edit_address' | t }} {{ forloop.index }}"
                                  aria-controls="EditAddress_{{ address.id }}"
                                  aria-expanded="false"
                                  data-address-id="{{ address.id }}">
                                  {{ 'customer.my_addresses.edit' | t }}
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="modal fade" id="address-delete-{{ address.id }}">
                        <div class="modal-dialog modal-dialog-centered" style="max-width: 350px;">
                          <div class="modal-content py-6 px-5 text-center border-0">
                            <button
                              class="btn p-0"
                              style="position: absolute; right: 16px; top: 8px;"
                              type="button"
                              data-bs-dismiss="modal"
                              aria-label="Close">
                              {% render 'icon-close' %}
                            </button>
                            <p class="mb-4">{{ 'customer.my_addresses.delete_confirm' | t }}</p>
                            <div class="row justify-content-center gy-2">
                              <div>
                                <a
                                  data-bs-dismiss="modal"
                                  class="btn btn-outline-primary d-block btn-mw"
                                  href="javascript:void(0);">{{ 'customer.my_addresses.cancel' | t }}</a>
                              </div>
                              <div>
                                <a
                                  data-addressid="{{ address.id }}"
                                  data-target="{{ address.url }}"
                                  class="as-address-delete btn btn-primary d-block btn-mw"
                                  href="javascript:void(0);">{{ 'customer.my_addresses.delete' | t }}</a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  {%- endif -%}
                {%- endfor -%}
                <div class="col h-1 h-md-3">
                  <div class="card py-3 px-4 h-100 rounded-3 bg-gray-100" style="border-style: dashed;">
                    <div class="d-flex align-items-center justify-content-center h-100">
                      <a class="text-decoration-none link-primary d-flex" href="#new">
                        <div>{% render 'icon-plus' %}</div>
                        <div>{{ 'customer.my_addresses.add_new' | t }}</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-6">
                {% render 'pagination', paginate: paginate %}
              </div>
            </div>
            {% for address in customer.addresses %}
              <div class="as-edit-address-form  d-none" data-address-id="{{ address.id }}">
                <nav class="d-block d-lg-none breadcrumb mb-4" aria-label="breadcrumb">
                  <a
                    class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black"
                    aria-current="page"
                    href="{{ routes.account_addresses_url }}">
                    {% render 'icon-chevron-left' %}
                    {{ 'customer.account.back_to_addresses' | t }}
                  </a>
                </nav>
                <div class="py-4 px-4 card rounded-3 mb-3 mb-lg-4 account-title bg-gray-100 border-0">
                  <h2 class="lead fw-bold mb-0">{{ 'customer.my_addresses.edit_address' | t }}</h2>
                </div>
                <div class="card p-4 rounded-3 account-content bg-gray-100 border-0">
                  <div class="my-n3 my-lg-n4">
                    {%- form 'customer_address', address, class: 'as-validate-form', novalidate: 'novalidate', autocomplete: "off", aria-labelledBy: 'AddressNewHeading' -%}
                      {% render 'account-address-form', form: form, new: false, address: address %}
                      {% if address != customer.default_address %}
                        <div class="my-3 my-lg-4">
                          <span class="form-check cursor-pointer small">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              id="address_default_address_{{ address.id }}"
                              name="address[default]"
                              value="1">
                            <label class="form-check-label" for="address_default_address_{{ address.id }}">{{ 'customer.my_addresses.set_default' | t }}</label>
                          </span>
                        </div>
                      {% else %}
                        <input
                          class="d-none"
                          type="checkbox"
                          name="address[default]"
                          value="1">
                      {% endif %}
                      <div class="my-3 my-lg-4 d-flex justify-content-center mx-n1 mx-lg-n2">
                        <a href="{{ routes.account_addresses_url }}" class="cancel-btn w-50 w-md-auto mx-1 mx-lg-2 btn btn-outline-primary">{{ 'customer.my_addresses.cancel' | t }}</a>
                        <button type="submit" class="w-50 w-md-auto mx-1 mx-lg-2 btn btn-primary">{{ 'customer.my_addresses.save' | t }}</button>
                      </div>
                    {%- endform -%}
                  </div>
                </div>
              </div>
            {% endfor %}
          </div>
        {%- endpaginate -%}

      {%- else -%}
        <div id="blank">
          <nav class="d-block d-lg-none breadcrumb mb-4" aria-label="breadcrumb">
            <a
              class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black"
              aria-current="page"
              href="{{ routes.account_url }}">
              {% render 'icon-chevron-left' %}
              {{ 'customer.account.back_to_account' | t }}
            </a>
          </nav>
          <div class="py-0 py-lg-4 px-0 px-lg-5 card rounded-3 mb-3 mb-lg-4 account-title d-none d-md-block bg-gray-100 border-0">
            <h2 class="lead fw-bold mb-0">{{ 'customer.my_addresses.title' | t }}</h2>
          </div>
          <div class="card rounded-3 responsive-border bg-gray-100 border-0">
            <div class="h-3 h-lg-4 d-flex flex-center">
              <div class="text-center">
                <div class="d-inline-block icon-wrap-xl mb-2">
                  {% render 'icon-location' %}
                </div>
                <p>{{ 'customer.my_addresses.none' | t }}</p>
                <a class="btn btn-primary btn-mw" href="#new">{{ 'customer.my_addresses.add_new' | t }}</a>
              </div>
            </div>
          </div>
        </div>
      {%- endif -%}
    </div>
  </div>
</div>
